/**
 * 数采地图 - 电厂图
 */
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { connect } from 'umi';
import event from '../../event';
import { Tooltip } from 'antd';

@connect(({ powerPlant }) => ({
  powerPlant,
}))
export default class extends React.Component {
  componentDidMount = () => {
    this.initVideo();
  };
  initVideo = () => {
    var local1 = document.getElementById('videoID'); //获取，函数执行完成后local内存释放
    local1.autoplay = true; // 自动播放
    local1.loop = true; // 循环播放
    local1.muted = true; // 关闭声音，如果为false,视频无法自动播放
    if (local1.paused) {
      //判断是否处于暂停状态
      local1.play(); //开启播放
    } else {
      local1.pause(); //停止播放
    }
  };
  render() {
    const { powerPlant } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.map}>
          {/* <img src={require('./img/map.png')} className={styles.img} /> */}

          <video id="videoID">
            <source src={'/map.mp4'} type="video/mp4" />
          </video>

          {/* <img src={require('./img/arrow1.png')} className={styles.arrow1}/>
          <img src={require('./img/arrow3.png')} className={styles.arrow2}/>
          <img src={require('./img/arrow2.png')} className={styles.arrow3}/>
          <img src={require('./img/arrow2.png')} className={styles.arrow4}/> */}

          <div className={styles.tooltip1}>
            <Tooltip
              title={<div>地磅XX万条</div>}
              visible
              showCancel={false}
              overlayClassName={'wwww'}
            >
              <a></a>
            </Tooltip>
          </div>

          <div className={styles.tooltip2}>
            <Tooltip
              title={<div>发电机组XX万条</div>}
              visible
              showCancel={false}
              overlayClassName={'wwww'}
            >
              <a></a>
            </Tooltip>
          </div>

          <div className={styles.tooltip3}>
            <Tooltip
              title={<div>随手拍XX万条</div>}
              visible
              showCancel={false}
              overlayClassName={'wwww'}
            >
              <a></a>
            </Tooltip>
          </div>

          <div className={styles.tooltip4}>
            <Tooltip
              title={<div>锅炉XX万条</div>}
              visible
              showCancel={false}
              overlayClassName={'wwww'}
              placement="bottom"
            >
              <a></a>
            </Tooltip>
          </div>
        </div>
      </div>
    );
  }
}
